<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps<{ data: Source, num: number }>()

</script>

<template>
  <a :href="props.data.url" target="_blank" style="text-decoration: none;">
    <el-card shadow="hover">
      <template #header>
        <div>
          <span class="ellipsis source-title" :title="props.data.name">【{{num}}】{{ props.data.name }}</span>
        </div>
      </template>
      <span class="source-content">
        {{ props.data.snippet }}
      </span>
    </el-card>
  </a>
</template>

<style scoped lang="less">
@width: 300px;

::v-deep(.el-card) {
  border-radius: 10px;
  padding: 10px;
  background-color: rgb(236, 236, 236);

  &__header {
    border-bottom: 1px solid black;
  }

  &__header, &__body {
    padding: 0;
  }
}

.source-title {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  width: @width;
}

.source-content {
  font-size: 14px;
  width: @width;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
